<template>
  <div>
    <div class="conder">
      <div class="left">
        <!-- 目录 -->
        <div class="left_top">
          <span>您当前的位置：</span>
          <a href="http://localhost:3000/#/">首页</a>
          <span> > </span>
          <a href="#">全部</a>
        </div>
        <!-- 全部公告 -->
        <div class="left_botton">
          <h3>全部公告</h3>
          <div v-for="i in data_title" :key="i.id" class="title">
            <p @click="Jump(i.id)">{{ i.title }}</p>
            <p>{{ i.createTime | formatTimers }}</p>
          </div>
        </div>
        <!-- 分页 -->
        <div class="block">
          <el-pagination
            @current-change="handleCurrentChange_01"
            :current-page.sync="page_01"
            :page-size="row_01"
            layout="total, prev, pager, next"
            :total="total_01"
          >
          </el-pagination>
        </div>
      </div>
      <div class="right">
        <!-- 全部论文 -->
        <div class="right_top">
          <h3>全部论文</h3>
          <ol>
            <li
              v-for="(item, index) in gonggao_01"
              :key="index"
              @click="Jump_01(item.id)"
            >
              {{ item.title }}
            </li>
          </ol>
        </div>
        <div class="block">
          <el-pagination
            @current-change="handleCurrentChange_02"
            :current-page.sync="page_02"
            :page-size="row_02"
            layout="total, prev, pager, next"
            :total="total_02"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ss: "",
      title: "",
      item: 0,
      date: "",
      names: "",
      data_title: "",
      gonggao_01: [],
      // 分页
      page_01: 1,
      page_02: 1,
      row_01: 15,
      row_02: 46,
      total_01: 0,
      total_02: 0,
    };
  },
  methods: {
    Jump(f) {
      this.$router.push({
        name: "20",
      });
      localStorage.setItem("tex", f);
    },
    getdata() {
      // 全部公告
      this.$http
        .get("/notice/", {
          page: this.page_01,
          pageSize: this.row_01,
        })
        .then((res) => {
          this.ss = res.data[this.item].content;
          this.data_title = res.data;
          this.title = res.data[this.item].title;
          this.date = res.data[this.item].createTime;
          this.names = res.data[this.item].author;
          this.total_01 = res.total;
        });
    },
    Jump_01(f) {
      this.$router.push({
        name: "20_02",
      });
      localStorage.setItem("tex_02", f);
    },
    // 全部论文
    gonggao() {
      this.$http
        .get("/paper/", {
          page: this.page_02,
          pageSize: this.row_02,
        })
        .then((res) => {
          this.gonggao_01 = res.data;
          this.total_02 = res.total;
        });
    },
    // 分页
    handleCurrentChange_01(val) {
      // console.log(`当前页: ${val}`);
      this.page_01 = val;
      this.getdata();
    },
    handleCurrentChange_02(val) {
      console.log(`当前页: ${val}`);
      this.page_02 = val;
      this.gonggao();
    },
  },

  mounted() {
    this.getdata();
    this.gonggao();
  },
};
</script>
<style lang="less" scoped>
.conder {
  text-align: left;
  // text-indent:2em;
  a {
    text-decoration: none;
    color: #1d5fb5;
  }
  width: 98vw;
  margin: 30px auto 0px;
  height: auto;
  overflow: hidden;
  .left {
    width: 68%;
    height: auto;
    overflow: hidden;
    float: left;
    .left_top {
      width: 98%;
      height: 30px;
      line-height: 30px;
      h3 {
        height: 30px;
        line-height: 30px;
        span:first-child {
          margin-left: 20px;
        }
        border: 1px solid #1d5fb5;
        background: linear-gradient(to bottom, #f9fdff, #e7eef3);
      }
      border: 1px solid #1d5fb5;
      background: linear-gradient(to bottom, #f9fdff, #e7eef3);
    }
    .left_botton {
      margin-top: 10px;
      border: 1px solid #1d5fb5;
      // padding-left: 2%;
      width: 98%;
      height: auto;
      overflow: hidden;
      box-sizing: border-box;
      h3 {
        width: 100%;
        height: 30px;
        line-height: 30px;
        border-bottom: 1px solid #1d5fb5;
        background: linear-gradient(to bottom, #f9fdff, #e7eef3);
        margin: 0;
        text-indent: 1em;
        color: #1d5fb5;
      }
      ul {
        list-style: disc;
        width: 97%;
        height: auto;
        // overflow: hidden;
        margin: 0 auto;
        // padding-left: 1%;
        list-style: square;
        color: #999;
        border-bottom: 1px dashed #1d5fb5;

        border-top: 1px dashed #1d5fb5;
        margin-bottom: 5px;
        li {
          // list-style: disc;
          // padding-left: 1%;
          // list-style-position: inside;
          width: 97%;
          height: 40px;
          line-height: 40px;
          // padding-left: 3%;
          a {
            float: left;
          }
          span {
            float: right;
          }
        }
      }
    }
  }
  .right {
    width: 32%;
    float: right;
    .right_top,
    .right_bottom {
      width: 98%;
      height: auto;
      overflow: hidden;
      margin: 0 auto;
      h3 {
        width: 99%;
        height: 30px;
        line-height: 30px;
        border: 1px solid #1d5fb5;
        background: linear-gradient(to bottom, #f9fdff, #e7eef3);
        margin: 0;
        text-indent: 1em;
        color: #1d5fb5;
      }
      ol {
        width: 99%;
        border: 1px solid #1d5fd5;
        border-top: none;
        height: auto;
        overflow: hidden;
        margin-bottom: 20px;
        padding: 5% 0px;
        li {
          width: 48%;
          height: 25px;
          line-height: 35px;
          float: left;
          list-style: none;
          font-size: 14px;
          text-indent: 4em;
          cursor: pointer;
        }
      }
    }
    .right_bottom {
      ul {
        width: 99%;
        height: auto;
        overflow: hidden;
        border: 1px solid #1d5fb5;
        border-top: none;
        list-style: disc;
        li {
          width: 97%;
          height: 32.5px;
          line-height: 32.5px;
          padding-left: 2%;
          list-style-position: inside;
        }
      }
    }
  }
}
.title {
  overflow: hidden;
}
.title p:nth-child(1) {
  float: left;
  padding-left: 13px;
  margin: 10px 0;
  color: #1d5fb5;
  cursor: pointer;
}
.title p:nth-child(2) {
  float: right;
  margin: 10px 0;
  padding-right: 45px;
}
li {
  list-style-type: none;
}
</style>